<template>
  <div>
    <PageSearchTableWrappe>
      <template #search>
        <a-form layout="inline" :model="searchValue">
          <a-form-item>
            <a-input v-model:value="searchValue.name" allowClear placeholder="角色名"> </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">查询 </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleCreate">新增角色 </a-button>
          </a-form-item>
        </a-form>
      </template>

      <template #table>
        <a-table :columns="columns" :data-source="data" :loading="dataLoading" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <span>
                <a @click="handleDateScope(record)">数据权限</a>
                <a-divider type="vertical" />
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a-popconfirm title="确认删除吗?" @confirm="handleDelete(record)">
                  <a href="#">删除</a>
                </a-popconfirm>
              </span>
            </template>
          </template>
        </a-table>
        <Pagination
          v-show="total > 0"
          :total="total"
          v-model:page="searchValue.page"
          v-model:limit="searchValue.limit"
          @pagination="fetchData"
        />
      </template>
    </PageSearchTableWrappe>

    <RoleModal v-model:visible="openModal" :data="modalData" @ok="handleModalOK" />

    <DataScopeModal
      v-model:visible="openModalDataScope"
      :data="modalDataDataScope"
      @ok="handleModalOKDateScope"
    />
  </div>
</template>
<script lang="ts">
export default {
  name: 'RoleManagement',
};
</script>
<script setup lang="ts">
import { ref, unref, onMounted, computed, h } from 'vue';
import { Tag, message } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { getRoleListPage, deleteRole } from '/@/api/sys/system';
import { PageSearchTableWrappe } from '/@/components/Page';
import { Pagination } from '/@/components/Pagination';
import RoleModal from './RoleModal.vue';
import DataScopeModal from './DataScopeModal.vue';

const columns = [
  {
    title: '角色名',
    dataIndex: 'name',
  },
  //数据范围（1：全部数据权限 2：自定数据权限 3：本部门及以下数据权限4：本部门数据权限
  // 5：本人）
  {
    title: '数据权限',
    dataIndex: 'dataScopeType',
    customRender: ({ text }) => {
      let res = '';
      if (text == 1) {
        res = '全部数据权限';
      } else if (text == 2) {
        res = '自定数据权限';
      } else if (text == 3) {
        res = '本部门及以下数据权限';
      } else if (text == 4) {
        res = '本部门数据权限';
      } else {
        res = '本人';
      }
      return res;
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    customRender: ({ record }) => {
      const status = record.status;
      const enable = ~~status === 1;
      const color = enable ? 'green' : 'red';
      const text = enable ? '启用' : '停用';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '创建人',
    dataIndex: 'creator',
  },
  {
    title: '描述',
    dataIndex: 'description',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
  },
];

const openModal = ref(false);
const modalData = ref({});

const openModalDataScope = ref(false);
const modalDataDataScope = ref({});

const data = ref([]);
const total = ref(0);

const searchValue = ref({
  page: 1,
  limit: 10,
  name: '',
});

const dataLoading = ref(false);
const fetchData = async () => {
  dataLoading.value = true;
  try {
    const res = await getRoleListPage(unref(searchValue));
    data.value = res.items;
    total.value = res.records;
  } catch (e) {
    console.log(e);
  } finally {
    dataLoading.value = false;
  }
};
onMounted(() => {
  fetchData();
});

const handleSearch = () => {
  searchValue.value.page = 1;
  fetchData();
};

function handleCreate() {
  openModal.value = true;
  modalData.value = {};
}

function handleEdit(record: Recordable) {
  openModal.value = true;
  modalData.value = record;
}
const handleDelete = async (record: Recordable) => {
  const { id } = record;
  await deleteRole({ id: id });
  message.success('删除成功');
  handleSearch();
};

const handleModalOK = (result) => {
  handleSearch();
};

const handleDateScope = (record: Recordable) => {
  openModalDataScope.value = true;
  modalDataDataScope.value = record;
};
const handleModalOKDateScope = (result) => {
  handleSearch();
};
</script>
